<template>
  <CustomDialog :drag-dialog="dialogInfo">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      :disabled="!form.busPageInfo.editable"
      size="mini"
      label-width="160px"
    >
      <el-row :gutter="2">
        <el-col :span="12">
          <el-form-item label="类型" prop="busMainData.cpyOwnerType">
            <el-select
              v-model="form.busMainData.cpyOwnerType"
              :style="style"
              placeholder="请选类型"
              disabled
            >
              <el-option
                v-for="item in optionsCpy"
                :key="item.key"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-input v-model="form.busMainData.cpyOwnerType" readonly /> -->
          </el-form-item>
          <el-form-item label="公司简写" prop="busMainData.cpyName">
            <el-input v-model="form.busMainData.cpyName" />
          </el-form-item>
          <el-form-item label="公司完整名称" prop="busMainData.cpyLongName">
            <el-input v-model="form.busMainData.cpyLongName" />
          </el-form-item>
          <el-form-item label="证件编号" prop="busMainData.cerCode">
            <el-input v-model="form.busMainData.cerCode" />
          </el-form-item>
          <el-form-item label="办公地址" prop="busMainData.officeAddress">
            <el-input v-model="form.busMainData.officeAddress" />
          </el-form-item>
          <el-form-item label="电话" prop="busMainData.telphone">
            <el-input v-model="form.busMainData.telphone" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="公司类型" prop="busMainData.cpyType">
            <el-select
              v-model="form.busMainData.cpyType"
              :style="style"
              placeholder="请选公司类型"
            >
              <el-option
                v-for="item in dicts.cpy_type"
                :key="item.id"
                :label="item.dictName"
                :value="item.dictCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="银行账号/名称" prop="busMainData.bankAccount">
            <el-input
              v-model="form.busMainData.bankAccount"
              style="width: 120px"
            />
            <el-input
              v-model="form.busMainData.bankName"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="主要联系人/手机" prop="busMainData.mobile">
            <el-input
              v-model="form.busMainData.mainContacor"
              style="width: 120px"
            />
            <el-input v-model="form.busMainData.mobile" style="width: 120px" />
          </el-form-item>
          <el-form-item label="公司官网" prop="busMainData.cpyUrl">
            <el-input v-model="form.busMainData.cpyUrl" />
          </el-form-item>
          <el-form-item label="收货地址" prop="busMainData.recAddress">
            <el-input v-model="form.busMainData.recAddress" />
          </el-form-item>
          <el-form-item label="邮件地址" prop="busMainData.email">
            <el-input v-model="form.busMainData.email" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="form.busPageInfo.editable" slot="footer" class="modal-footer">
      <module-extend
        :editable="form.busPageInfo.editable"
        :source-form-object="formObject"
        :form-apply-id="form.busExtend.formApplyId"
        module-bus-class="200010-001"
      />
      <el-button v-if="form.busPageInfo.editable" type="text" @click="cancel"
        >取消</el-button
      >
      <el-button
        v-permission="[
          'SYS_ADMIN',
          'COMMON_ADMIN',
          'CUSTOMSUPPLY_ALL',
          'CUSTOMSUPPLY_CREATE',
        ]"
        v-if="form.busPageInfo.editable"
        :loading="loading"
        type="primary"
        @click="doSave"
        >保存</el-button
      >
    </div>
  </CustomDialog>
</template>

<script>
import customSupply from "@/api/base/CustomSupply";
import { isvalidPhone } from "@/utils/validate";
import moduleExtend from "@/views/components/moduleExtend";

export default {
  components: { moduleExtend },
  dictTypes: ["cpy_owner_type", "cpy_type"],
  props: {
    sup_this: {
      type: Object,
      required: true,
    },
  },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入电话"));
      } else if (!isvalidPhone(value)) {
        callback(new Error("请输入正确的11位手机号码"));
      } else {
        callback();
      }
    };
    return {
      optionsCpy: [
        { key: 104159592643108073, value: "supply", label: "供应商" },
      ],
      isAdd: false,
      formObject: this,
      loading: false,
      style: "width: 184px",
      dialogInfo: {
        name: "customSupplyMngFormDialog",
        title: "客户供应商维护",
        fullScreen: false,
        width: 80,
        height: 90,
      },
      form: {
        busMainData: {
          id: "",
          enableFlag: "Y",
          cpyOwnerType: "supply",
        },
        busPageInfo: {},
      },
      rules: {
        "busMainData.cpyName": [
          { required: true, message: "请输入名称", trigger: "blur" },
          {
            min: 3,
            max: 50,
            message: "长度在 3 到 50 个字符",
            trigger: "blur",
          },
        ],
        "busMainData.cpyLongName": [
          { required: true, message: "请输入完整公司名称", trigger: "blur" },
          {
            min: 3,
            max: 200,
            message: "长度在 3 到 200 个字符",
            trigger: "blur",
          },
        ],
        "busMainData.cerCode": [
          { required: true, message: "请输入证件编号", trigger: "blur" },
          {
            min: 15,
            max: 20,
            message: "长度在 15 到 20 个字符",
            trigger: "blur",
          },
        ],
        // "busMainData.phone": [
        //   { required: false, trigger: "blur", validator: validPhone },
        // ],
        "busMainData.email": [
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        "busMainData.cpyOwnerType": [
          { required: true, message: "请选择类别", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    cancel() {
      this.resetForm();
    },
    initDataOfBefore() {},
    displayDialog() {
      const { name } = this.dialogInfo;
      this.$nextTick(() => {
        this.$modal.show(name);
      });
    },
    hiddenDialog() {
      const { name } = this.dialogInfo;
      this.$nextTick(() => {
        this.$modal.hide(name);
      });
    },
    addData() {
      this.isAdd = true;
      const data = { paramBean: {} };
      customSupply
        .toAdd(data)
        .then((res) => {
          this.displayDialog();
          this.form = res.data;
          this.form.busMainData.cpyOwnerType = "supply";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    copyData(mainId) {
      this.isAdd = true;
      const data = { paramBean: { id: mainId } };
      customSupply
        .toCopy(data)
        .then((res) => {
          this.displayDialog();
          this.form = res.data;
          this.form.busMainData.cpyOwnerType = "supply";
        })
        .catch((err) => {
          console.log(err);
        });
    },
    viewMainData(id) {
      this.isAdd = false;
      const data = { paramBean: { id: id } };
      customSupply.viewMainData(data).then((res) => {
        this.displayDialog();
        this.form = res.data;
        this.form.busMainData.cpyOwnerType = "supply";
      });
    },
    doSubmit() {
      this.doSingleSave(true);
    },
    doSave() {
      this.doSingleSave(false);
    },
    doSingleSave(isSubmit) {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.formSubmit = isSubmit;
          this.loading = true;
          if (this.isAdd) {
            this.doAdd();
          } else {
            this.doEdit();
          }
        }
      });
    },
    doAdd() {
      customSupply
        .addOrEdit(this.form)
        .then((res) => {
          this.resetForm();
          this.loading = false;
          this.sup_this.init();
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    doEdit() {
      customSupply
        .addOrEdit(this.form)
        .then((res) => {
          this.resetForm();
          this.loading = false;
          this.sup_this.init();
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    resetForm() {
      this.hiddenDialog();
      this.$refs["form"].resetFields();
    },
    changeData(busId) {
      const data = { paramBean: { id: busId } };
      customSupply
        .toChange(data)
        .then((res) => {
          this.displayDialog();
          this.form = res.data;
        })
        .catch((err) => {
          this.dialog = false;
          console.log(err);
        });
    },
  },
};
</script>
